<template>
    <div class="out_box">
        <headers />

        <div class="content_box">
            <div class="box" id="box1" v-if="formType < 3">
                <h3 class="title bold">{{ formType === 1 ? $t('login_register.form.reset_login_pwd') : $t('login_register.form.reset_transaction_pwd') }}</h3>
                <div class="step1">
                    <div class="input_box">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.mobile_email')" v-model="dataForm.mobileEmail"></v-input>
                    </div>
                    <div class="input_box">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.valid_code')" v-model="dataForm.codeText"></v-input>
                        <span :class="{'send_code': true, 'sent': sendCodeText}" @click="getMessageCode()">{{ sendCodeText || $t('login_register.form.send_code')}}</span>
                    </div>
                    <div class="verify-wrap mt_20" id="verify-wrap"></div>
                    <div class="tips_box mt_10" v-show="tipsText">
                        <i class="iconfont">&#xe7ac;</i> {{ tipsText }}
                    </div>
                    <div class="mt_40">
                        <v-button class="block" size="large" type="primary" @click="pushData(1)">{{ $t('login_register.form.next') }}</v-button>
                    </div>
                </div>
                <div class="step2 none">
                    <div class="input_box">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.new_password')" v-model="dataForm.password1" type="password"></v-input>
                    </div>
                    <div class="input_box">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.confirm_new_password')" v-model="dataForm.password2" type="password"></v-input>
                    </div>
                    <div class="tips_box mt_10" v-show="tipsText">
                        <i class="iconfont">&#xe7ac;</i> {{ tipsText }}
                    </div>
                    <div class="mt_40">
                        <v-button class="block" size="large" type="primary" @click="pushData(2)">{{ $t('login_register.form.submit') }}</v-button>
                    </div>
                </div>
                <div class="others cl">
                    <!-- <span class="f_l pointer blue">通过邮箱找回</span> -->
                    <span class="f_r pointer" @click="$router.back(-1)">{{ $t('login_register.form.back') }}</span>
                </div>
            </div>
            <div class="box" id="box2" v-else>
                <h3 class="title bold">{{ formType === 3 ?  $t('login_register.form.modify_or_bind_mail') :  $t('login_register.form.modify_or_bind_mobile') }}</h3>
                <div class="step1">
                    <div class="input_box">
                    </div>
                    <div class="input_box" v-if="formType === 3">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.enter_modified_or_bound_mail')" v-model="dataForm.mobileEmail"></v-input>
                    </div>
                    <div class="input_box" v-if="formType === 4">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.enter_modified_or_bound_mobile')" v-model="dataForm.mobileEmail"></v-input>
                    </div>
                    <div class="input_box">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.valid_code')" v-model="dataForm.codeText"></v-input>
                        <span :class="{'send_code': true, 'sent': sendCodeText}" @click="getMessageCode()">{{ sendCodeText || $t('login_register.form.send_code')}}</span>
                    </div>
                    <div class="verify-wrap mt_20" id="verify-wrap"></div>
                    <div class="tips_box mt_10" v-show="tipsText">
                        <i class="iconfont">&#xe7ac;</i> {{ tipsText }}
                    </div>
                    <div class="mt_40">
                        <v-button class="block" size="large" type="primary" @click="pushData(1)">{{ $t('login_register.form.next') }}</v-button>
                    </div>
                </div>
                <div class="step2 none">
                    <div class="input_box" v-if="formType === 3">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.enter_new_mail')" v-model="dataForm.newMobileEmail"></v-input>
                    </div>
                    <div class="input_box" v-if="formType === 4">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.enter_new_mobile')" v-model="dataForm.newMobileEmail"></v-input>
                    </div>
                    <div class="input_box">
                        <v-input class="no_border no_radius input" :placeHolder="$t('login_register.form.valid_code')" v-model="dataForm.codeText"></v-input>
                        <span :class="{'send_code': true, 'sent': sendCodeText}" @click="getMessageCode()">{{ sendCodeText || $t('login_register.form.send_code')}}</span>
                    </div>
                    <div class="tips_box mt_10" v-show="tipsText">
                        <i class="iconfont">&#xe7ac;</i> {{ tipsText }}
                    </div>
                    <div class="mt_40">
                        <v-button class="block" size="large" type="primary" @click="pushData(2)">{{ $t('login_register.form.submit') }}</v-button>
                    </div>
                </div>
                <div class="others cl">
                    <!-- <span class="f_l pointer blue">通过邮箱找回</span> -->
                    <span class="f_r pointer" @click="$router.back(-1)">{{ $t('login_register.form.back') }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import '@common/adaptable.min.js'
    import '@common/slideVerify/main.js';
    import { Base64 } from '@common/base64.min.js';
    import { getMessageCode, doUpdatePwd, doUpdatePhoneOrMail } from '@doapis/user/user.js';

    let setCount;
    let slideVerify;

    export default {
        name: "Forgot",
        components: {
            Headers
        },
        data: function() {
            return {
                sendCodeText: '',       // 验证码倒计时文字
                tipsText: '',           // 错误提示
                slideResult: false,     // 滑动验证结果
                codeText: '',           // 验证码
                formType: 1,            // 1、修改登录密码，2、修改交易密码，3、修改绑定邮箱，4、修改手机号码
                dataForm: {
                    mobileEmail: '',
                    codeText: '',
                    password1: '',
                    password2: '',
                    newMobileEmail: ''
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            // 获取手机验证码
            getMessageCode: function() {
                const that = this;
                const dataForm = this.dataForm;
                const mobileEmail = dataForm.newMobileEmail ? dataForm.newMobileEmail : dataForm.mobileEmail;
                if (!$.testMobile(mobileEmail) && !$.testMail(mobileEmail)) {
                    that.tipsText = that.$t('login_register.valid.mobile_email');
                } else if (!this.sendCodeText) {
                    let countNum = 60;
                    that.tipsText = '';

                    clearInterval(setCount);
                    setCount = setInterval(function() {
                        if (countNum > 0) {
                            that.sendCodeText =  that.$t('login_register.valid.send_again') + countNum + that.$t('login_register.valid.second');
                            countNum--;
                        } else {
                            clearInterval(setCount);
                            that.sendCodeText = '';
                        }
                    }, 1000);
                    
                    getMessageCode({
                        mobileEmail
                    }).then(function(res) {
                        that.codeText = res.data.toString();
                    });
                }
            },
            pushData: function(type) {
                const that = this;
                const dataForm = this.dataForm;
                const formType = this.formType;

                // type为1是验证阶段，2为重置阶段，只有1通过了才会显示2
                if (formType < 3) {             // 修改登录和交易密码
                    if (type === 1) {
                        if (!$.testMobile(dataForm.mobileEmail) && !$.testMail(dataForm.mobileEmail)) {
                            that.tipsText = that.$t('login_register.valid.mobile_email');
                        } else if (dataForm.codeText !== that.codeText) {
                            that.tipsText = that.$t('login_register.valid.valid_code');
                        } else if (!that.slideResult) {
                            that.tipsText = that.$t('login_register.valid.slide_verify') + '！！';
                        } else {
                            $('#box1 .step1').hide();
                            $('#box1 .step2').fadeIn();
                            that.tipsText = '';
                            that.sendCodeText = '';
                        }
                    } else {
                        if (!$.testPassword(dataForm.password2)) {
                            that.tipsText = that.$t('login_register.valid.password');
                        } else if (dataForm.password1 !== dataForm.password2) {
                            that.tipsText = that.$t('login_register.valid.new_password');
                        } else {
                            doUpdatePwd({
                                mobileEmail: dataForm.mobileEmail,
                                password: dataForm.password2,
                                passwordType: that.formType === 1 ? 'loginPassword' : 'paymenPassword'
                            }).then(function(res) {
                                if (res.success) {
                                    that.$modal.success({
                                        title: that.$t('common.alert.success.title'),
                                        content: that.$t('common.alert.success.modify_password'),
                                        onOk: function() {
                                            that.$router.back(-1);
                                        }
                                    });
                                }
                            });
                        }
                    }
                }
                
                if (formType === 3 || formType === 4) {               // 修改邮箱或手机号
                    if (type === 1) {
                        const mobilePhone = that.userDATA[Base64.encode('mobilePhone')];
                        const email = that.userDATA[Base64.encode('email')];
                        const isMobile = $.testMobile(dataForm.mobileEmail);
                        const isMail = $.testMail(dataForm.mobileEmail);

                        if ((dataForm.mobileEmail !== mobilePhone && dataForm.mobileEmail !== email) || (!isMail && !isMobile)) {
                            that.tipsText = (formType === 3 ? that.$t('login_register.mail') : that.$t('login_register.mobile')) + that.$t('login_register.valid.mismatch');
                        } else if (dataForm.codeText !== that.codeText || !dataForm.codeText) {
                            that.tipsText = that.$t('login_register.valid.valid_code');
                        } else if (!that.slideResult) {
                            that.tipsText = that.$t('login_register.valid.slide_verify') + '！！';
                        } else {
                            $('#box2 .step1').hide();
                            $('#box2 .step2').fadeIn();
                            that.tipsText = '';
                            that.codeText = '';
                            that.dataForm.codeText = '';
                        }
                    } else {
                        const isMobile = $.testMobile(dataForm.newMobileEmail);
                        const isMail = $.testMail(dataForm.newMobileEmail);

                        if ((formType === 3 && !isMail) || (formType === 4 && !isMobile)) {
                            that.tipsText = formType === 3 ? that.$t('login_register.valid.mail') : that.$t('login_register.valid.mobile');
                        } else if (dataForm.codeText !== that.codeText || !dataForm.codeText) {
                            that.tipsText = that.$t('login_register.valid.valid_code');
                        } else {
                            doUpdatePhoneOrMail({
                                mobileEmail: dataForm.newMobileEmail,
                                memberid: that.userDATA.memberid
                            }).then(function(res) {
                                if (res.success) {
                                    // that.$store.commit({
                                    //     type: 'pushUserData',
                                    //     userDATA: res.data
                                    // });
                                    that.$modal.success({
                                        title: that.$t('common.alert.success.title'),
                                        content: that.$t('login_register.form.modified') + (isMail ? that.$t('login_register.mail') : that.$t('login_register.mobile')) + that.$t('login_register.form.login_again'),
                                        onOk: function() {
                                            that.$store.dispatch({
                                                type: 'doLogout',
                                                data: { notAlert: true }
                                            });
                                            that.$router.replace({ path: '/login_register'});
                                        }
                                    });
                                }
                            });
                        }
                    }
                }
            },
            // 跳转首页
            jumpMain: function() {
                this.$router.replace({ path: '/main'});
            }
        },
        mounted: function() {
            const that = this;
            let query = this.$route.query;
            that.formType = Number(query.type);

            slideVerify = new $.slideVerifyPlug('#verify-wrap',{
                initText: that.$t('login_register.valid.slide_verify'),
                getSuccessState:function(res){
                    that.slideResult = res;
                }
            });

            this.$nextTick(function() {
                if ((this.formType === 3 && !this.userDATA.email) || (this.formType === 4 && !this.userDATA.mobilePhone)) {
                    $('#box2 .step1').hide();
                    $('#box2 .step2').show();
                }
            });
        },
        destroyed: function () {
            clearInterval(setCount);
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        width: 100%;
        min-height: 100%;
        background-color: white;
    }
    .content_box{
        >.box{
            width: 400px;
            margin: 0 auto;
        }
        .title{
            padding: 80px 0 40px 0;
            font-size: 0.11rem;
        }
        .input_box{
            margin-bottom: 0.13rem;
            position: relative;
            .input{
                padding: 0.06rem 0;
                font-size: 0.08rem;
                border-bottom: 1px solid #EFEFF4;
                box-sizing: content-box;
            }
            .send_code{
                position: absolute;
                bottom: 0.06rem;
                right: 10px;
                color: @theme_color;
                font-size: 0.08rem;
                line-height: 28px;
                cursor: pointer;
                &.sent{
                    color: #777;
                }
            }
        }
        .tips_box{
            font-size: 12px;
            color: #F54F23;
            white-space: initial;
            .iconfont{
                display: inline-block;
                margin-top: -1px;
                vertical-align: middle;
            }
        }
        /deep/ .ant-btn-primary{
            width: 100%;
            height: 50px;
            margin-top: 0.01rem;
            font-size: 19px;
            box-sizing: border-box;
        }
        .others{
            margin-top: 10px;
            padding-bottom: 40px;
            .blue{
                color: @theme_color;
            }
        }
    }
</style>
